<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>熊猫部落-熊猫文创</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-repeat: no-repeat;
        background-color: transparent;
        overflow: hidden;
      }
      #left { 
        position: absolute;
        left: 50px;
        top: 65px;
      }
      #left .item {
        position: absolute;
        background: url(./images/placeholder_bg.png);
        background-size: 100% 100%;
      }
      #left-0 {
        top: 0;
        left: 0;
        width: 182px;
        height: 250px;
        padding: 15px;
        display: table;
        color: #fff;
        font-size: 20px;
        table-layout: fixed;
      }

      #left-0 .container {
        display: table-cell;
        vertical-align: middle;
        line-height: 40px;
      }

      #left-0 .container div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #left-1,
      #left-2 {
        left: 0;
        width: 212px;
        height: 125px;
      }

      #left-1 {
        top: 310px;
      }

      #left-2 {
        top: 465px;
      }
      #right {
        position: absolute;
        top: 65px;
        left: 292px;
      }
      .right-item {
        position: absolute;
        background: url(./images/placeholder_bg.png);
      }
      .right-item .color {
        color: #f60;
      }
      .right-container{
        position: absolute;
        bottom: 0;
        height: 40px;
        left: 0;
        right: 0;
        padding: 0 20px;
        background: url(./images/mark_bg.png);
      }
      .right-container-view {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .right-container-view .name{
        position: absolute;
        line-height: 40px;
        left: 0;
        color: #fff;
        font-size: 20px;
        white-space: nowrap;
      }
      #right-0 .price,
      #right-1 .price {
        display: none;
      }
      #right-1 {
        left: 484px;
      }
      #right-2,
      #right-3,
      #right-4,
      #right-5 {
        top: 300px;
      }
     
      #right-3 {
        left: 225px;
      }
      #right-4 {
        left: 450px;
      }
      #right-5 {
        left: 675px;
      }
    </style>
  </head>
  <body onload="init()">
    <div id="main">
      <!--联通不要 -->
      <div class='smallResolution' id="smallResolution"></div>
	  <!--联通不要 -->
      <div id="left"></div>
      <div id="right"></div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="config/index.js"></script>
    <script src="api/index.js"></script>
    <script src="js/utlis.js"></script>
    <script src="js/KeyEnter.js"></script>
    <script src="js/event.js"></script>
    <script src="js/move.js"></script>
    <script src="js/log.js"></script>
    <script src="js/page.js"></script>

    <script src="components/dialog.js"></script>
    <script src="components/cac/index.js"></script>
    <script src="components/cac/commend.js"></script>
    <script>
      var hanlderEnter = {
        left: function (index, id) {
          var data = page.data.cac[index]
          var typeId = cac.typeId
          var linkUrl = data.linkUrl
          if (!linkUrl)  return
          var form = config.path + '/cac.html?elId=' + id + '&typeId=' + typeId
          var to = config.path + "/" + data.linkUrl +".html?typeId=" + data.typeId
          page.addUrl(to, form)
        },
        right: function (index, id) {
          var commend = page.data.commend[index]
          var data = page.data.cac[3]
          console.log(commend)
          var typeId = cac.typeId
          var linkUrl = data.linkUrl
          if (!linkUrl)  return
          var form = config.path + '/cac.html?elId=' + id + '&typeId=' + typeId
          var to = config.path + "/" + data.linkUrl +".html?goodsId=" + commend.ID
          page.addUrl(to, form)
        }
      }

      function getPreFocus() {
        var typeId = utils.getUrlParam("typeId", "");
        // var elm = utils.getUrlParam("elm", "left-0");
        cac.init(typeId)
        commend.init()
        var elId = utils.getUrlParam("elId", "")
        var dom = document.getElementById(elId || "left-0")
        dom && utils.toggleClass(dom)
      }

      function init () {
        page.init()
        dialog.init()
        getPreFocus()
        log.commit({
          name: '熊猫文创页面',
          type1: 'browse',
          type2: 'cac',
          starttime: new Date().getTime(),
        })
      }

      function keyUp () {
        if (dialog.visible) return
        var dom = move.up();
        dom && utils.toggleClass(dom);
      }

      function keyDown () {
        if (dialog.visible) return
        var dom = move.down();
        dom && utils.toggleClass(dom);
      }

      function keyLeft () {
        if (dialog.visible) return
        var dom = move.left();
        dom && utils.toggleClass(dom);
      }

      function keyRight () {
        if (dialog.visible) return
        var dom = move.right();
        dom && utils.toggleClass(dom);
      }

      function keyEnter () {
        if (dialog.visible) {
          if (dialog.back) {
            page.goback()
          } else {
            dialog.hide()
          }
        } else {
          var info = utils.getCurInfo()
          var type = info.type
          var index = info.index
          var id = info.id
          hanlderEnter[type](index, id)
        }
      }

      function keyBack () {
        if (dialog.visible) {
          dialog.hide()
        } else {
          page.goback()
        }
      }
    </script>
  </body>
</html>
